<template>
  <el-dialog :title="monthTitle" :visible.sync="visible" :fullscreen="true" :close-on-click-modal="false"
    :close-on-press-escape="false" append-to-body>
    <div>
      <el-table v-loading="loading" :data="monthData" :summary-method="getSummaries" :span-method="mergeRow"
        show-summary>
        <el-table-column label="计费年月" align="center" prop="calcMonth">
        </el-table-column>
        <el-table-column label="续费类型" align="center" prop="renewType">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.stu_member_type" :value="scope.row.renewType" />
          </template>
        </el-table-column>

        <el-table-column align="center" label="新招">
          <el-table-column label="总人数" align="center" prop="addStuNum" />
          <el-table-column label="总佣金(元)" align="center" prop="addStuAmount" />
        </el-table-column>

        <el-table-column align="center" label="续费">
          <el-table-column label="总人数" align="center" prop="renewStuNum" />
          <el-table-column label="总佣金(元)" align="center" prop="renewStuAmount" />
        </el-table-column>
        <el-table-column label="总佣金(元)" align="center" prop="orderAmount" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
  import {
    monthList
  } from "@/api/bus_web/report/chargeorder";

  export default {
    name: "order_month_index",
    dicts: ['stu_member_type'],
    components: {

    },
    data() {
      return {
        // 遮罩层
        loading: true,
        monthTitle: '',
        // 显示搜索条件
        showSearch: true,
        visible: false,
        // 总条数
        monthTotal: 0,
        monthData: [],
        // 存储每行在指定列是否需要合并的信息
        mergeSpan: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          deviceSn: null,
          deviceMac: null,
          schoolIdArray: []
        }
      };
    },
    methods: {
      init(row) {
        this.monthTitle = '[' + row.schoolName + '(' + row.calcMonth + ')]月度统计'
        this.resetForm("queryForm")
        this.queryParams.schoolIdArray.push(row.id)
        this.queryParams.id = row.billId
        this.visible = true
        this.getMonthDataList()
      },
      // 计算合并信息：基于 field 字段的连续相同值
      calculateMergeSpan(field) {
        const spans = [];
        const data = this.monthData;
        let i = 0;
        while (i < data.length) {
          let j = i;
          // 找出从 i 开始连续相同值的结束位置
          while (j < data.length && data[j][field] === data[i][field]) {
            j++;
          }
          const count = j - i;
          // 第一个位置记录 rowspan，其余标记为隐藏
          spans[i] = count;
          for (let k = i + 1; k < j; k++) {
            spans[k] = 0;
          }
          i = j;
        }
        this.mergeSpan = spans;
      },
      getMonthDataList() {
        this.loading = true;
        monthList(this.queryParams).then(response => {
          this.monthData = response.rows;
          this.monthTotal = response.total;
          this.calculateMergeSpan('calcMonth')
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getMonthDataList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if (index < 2) {
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
          }
        });

        return sums;
      },
      //合并第一列
      mergeRow({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        // 只对“姓名”列（columnIndex === 1）应用合并
        if (columnIndex === 0) {
          const rowspan = this.mergeSpan[rowIndex];
          return {
            rowspan,
            colspan: rowspan > 0 ? 1 : 0
          };
        }
        // 其他列不合并
        return {
          rowspan: 1,
          colspan: 1
        };
      }
    }
  };
</script>
